<!DOCTYPE html>
<!--
  ~  Copyright 2016 http://www.hswebframework.org
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~
  -->

<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <title>OAuth2授权页面</title>
    <script type="application/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style type="text/css">
        .login,.isLogin {
            width: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="login">
    <h2 align="center">用户登录</h2>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">用户名</span>
        <input type="text" id="username" class="form-control" placeholder="username" aria-describedby="basic-addon1">
    </div>
    <br>
    <div class="input-group">
        <span class="input-group-addon">密<span style="margin-left: 1em"></span>码</span>
        <input type="password" id="password" class="form-control" placeholder="password" aria-describedby="basic-addon1">
    </div>

    <div style="width: 100px;margin: 10px auto auto;">
        <button type="button" onclick="doLogin()" class="btn btn-default">登录</button>
    </div>
</div>
<div class="isLogin">
    当前已登录: <span class="login-username"></span>
    <button type="button" onclick="doAuth()" class="btn btn-default">授权</button>
    <button type="button" onclick="changeUser()" class="btn btn-default">更换用户</button>
</div>
</body>
</html>
<script type="text/javascript">
    function getParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    init();
    function init() {
        $(".login").hide();
        $(".isLogin").hide();
        doAjax("GET", "/authorize/me", {}, function (d) {
            $(".login-username").text(d.result.user.username);
            $(".isLogin").show();
        }, function (e) {
            $(".login").show();
        })
    }
    function changeUser() {
        $(".login").show();
        $(".isLogin").hide();
    }

    function doLogin() {
        var username = $("#username").val();
        var password = $("#password").val();
        if ($.trim(username) == "") {
            $("#username").focus();
            return;
        }
        if ($.trim(password) == "") {
            $("#password").focus();
            return;
        }
        doAjax("POST", "/authorize/login", {username: username, password: password}, function (e, r) {
            doAuth();
        }, function (e) {
            alert(e.message)
        })
    }
    function doAuth() {
        var param = getRequest();
        param.scope = "public";
        //执行OAuth认证
        doAjax("GET", "/oauth2/authorize", param, function (e, r) {
            var redirect =e.redirectUri;
            var uri = redirect.indexOf("?") != -1 ? "&" : "?";
            uri += "code=" + e.code + "&state=" + e.state;
            window.location.href = (redirect + uri);
        }, function (e) {
            alert(e.message);
        })
    }

    function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape((strs[i].split("=")[1]));
            }
        }
        return theRequest;
    }

    function doAjax(method, url, data, success, error) {
        $.ajax({
            type: method,
            url: url,
            data: data,
            success: success,
            error: function (e) {
                error(e.responseJSON);
            },
            dataType: "json"
        });
    }
</script>